<template>
  <div id="MainScoreDetails">
    <div class="timeBox"> <vue-datepicker-local v-model="emptyTime" clearable  /></div>
    <div class="scoreList" v-if="time.length">
        <ul class="cbp_tmtimeline"  v-if="isTimeAxis">
          <li v-for="item1 in time">
            <div class="circle"></div><span class="time">{{item1|filterDateAxis}}</span>
            <div class="cbp_tmlabel">
              <ul class="list-record clearfix">
                <li class="pull-left clearfix" v-for="list in listData[item1]" :data-name="list.GradeName" @click="routeLink($event)">
                  <p>{{list.GradeName}}</p>
                  <p><span class="center-block">{{list.GradeValue}}</span></p>
                  <p>{{list.Time_Grade|filterTime}}</p>
                </li>
              </ul>
            </div>
            <div class="circle-bottom"></div>
          </li>
        </ul>
      <ul class="list-record clearfix" v-for="item1 in time" v-if="!isTimeAxis">
        <li class="pull-left clearfix" v-for="list in listData[item1]" :data-name="list.GradeName" @click="routeLink($event)">
          <p>{{list.GradeName}}</p>
          <p><span class="center-block">{{list.GradeValue}}</span></p>
          <p>{{list.Time_Grade|filterTime}}</p>
        </li>
      </ul>
    </div>
    <loading v-if="isShow && time.length== 0"></loading>
    <noSearch v-if="!isShow && time.length == 0"></noSearch>
  </div>
</template>
<script>
  import { apiPatinetScore } from '@/api/api'  //引入患者评分数据
  import loading from '@/components/loading/loading'
  import noSearch from '@/components/search/noSearch' //导入没有搜索结果组件
  import Bus from "@/components/common/bus"; //引入公共媒介JS BUS
  import VueDatepickerLocal from '@/components/datepicker/VueDatepickerLocal'
  export default {
    data() {
      return {
        time: [],
        listData: [],
        patientID: this.$store.getters.ID,
        dataTime:'0000-00-00',
        isShow: true,
        emptyTime: '',
        isTimeAxis:true
      }
    },
    watch: {
      dataTime: {
        handler(curVal, oldVal) {
          if (this.dataTime == '') {
            this.time = [];
            this.dataTime = "0000-00-00";
            this.isShow = true;
            this.isTimeAxis = true;
            this.GetPatinetScore();
          } else if (this.dataTime == "0000-00-00") {
            this.time = [];
            this.dataTime = "0000-00-00";
            this.isShow = true;
            this.isTimeAxis = true;
            this.GetPatinetScore();
          } else {
            this.time = [];
            this.isShow = true;
            this.isTimeAxis = false;
            this.GetPatinetScore();
          }
        }
      },
    },
    created() {
      sessionStorage.removeItem("scrollTop")
    },
    activated() {
      // 返回同一个位置
      var scrollTop = sessionStorage.getItem("scrollTop");
      if (scrollTop) {
        this.$nextTick(function () {
          $("#MainScoreDetails .scoreList").scrollTop(scrollTop);
        });
      }
     
    },
  mounted() {
      this.GetPatinetScore();
      Bus.$on("timePicker", e => {
        this.dataTime = e.trim();
      });
    },
    methods: {
      GetPatinetScore() {
        apiPatinetScore({
          patientIdIn: this.patientID,
          dateTime: this.dataTime
        })
          .then(res => {
            this.time = [];
            if (JSON.parse(res).Status == -1) {
              this.isShow = false;
            }
            if (JSON.parse(res).Status == 1) {
              this.listData = JSON.parse(res).Data;
              for (var item in JSON.parse(res).Data) {
                this.time.push(item);
              }
              this.isShow = true;
            }
          })
      },
      routeLink(e) {
        let scoreName = e.currentTarget.getAttribute("data-name");
        sessionStorage.setItem('scrollTop', $("#MainScoreDetails .scoreList").scrollTop());
        this.$router.push({
          path: '/scorePage/scoreDetailsPage',
          query: { item: 7, scoreName: scoreName}
        })
      }
    },
    components: {
      loading,
      noSearch,
      VueDatepickerLocal
    }
  }
</script>
<style scoped>
  #MainScoreDetails {
    /* overflow-y: auto; */
  }
    .scoreList {
      padding: 0 20px 20px 50px;
      margin-top: 20px;
      list-style: none;
      position: relative;
      height: calc(100vh - 240px);
      overflow: auto;
    }
  .cbp_tmtimeline {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
  }
  .timeBox {
   position:absolute;
   top:20px;
   left:300px;
  }

  .cbp_tmtimeline:before {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 0;
    width: 1px;
    background: #ccc;
  }


  .cbp_tmtimeline > li {
    position: relative;
    padding-left: 20px;
  }

    .cbp_tmtimeline .circle {
      width: 8px;
      height: 8px;
      line-height: 8px;
      position: absolute;
      color: #fff;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 0 4px #84c3e3;
      text-align: center;
      left: -3px;
      top: 6px;
    }

    .cbp_tmtimeline .circle-bottom {
      width: 8px;
      height: 8px;
      line-height: 8px;
      position: absolute;
      color: #fff;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 0 4px #84c3e3;
      text-align: center;
      left: -3px;
      bottom: -14px;
    }

  .cbp_tmlabel {
    padding-bottom: 25px;
  }

  .list-record li {
    width: 210px;
    box-shadow: 0 0 10px #ccc;
    text-align: center;
    border-radius: 8px;
    margin-top: 25px;
    margin-left: 15px;
  }

    .list-record li p {
      line-height: 40px;
      height: 40px;
      text-align: center;
    }

      .list-record li p:nth-child(2) {
        background-color: #5DB8E5;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }

        .list-record li p:nth-child(2) span {
          width: 30px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          border: 1px solid #fff;
        }
         @media screen and (max-width: 768px) {
}
@media screen and (max-width: 425px) {
  .list-record li {
    margin-left:0;
    margin-top: 10px;
  
  }
  .link-list {
    
    margin-right: 0;
  }
  .timeBox {
   position:initial;
   margin:  0 0 0 20px;
  }
}
</style>
